<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="structures.User;"%>
<%User user = (User) session.getAttribute("user");%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TiVendoIo - User Home Page</title>

    <!-- Bootstrap -->
    <link href="/serviceTechnologies/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Select2 -->
    <link href="/serviceTechnologies/select2-3.4.6/select2.css" rel="stylesheet">
    <link href="/serviceTechnologies/css/select2-bootstrap.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
    <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen"> 
    <link href="css/style.css" rel = "stylesheet">
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src = "/serviceTechnologies/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="/serviceTechnologies/select2-3.4.6/select2.js"></script>
    
    <script type="text/javascript">
	$(document).ready(function(){
		$('#footer').load('/serviceTechnologies/common/footer.jsp');
		$('#navbar').load('/serviceTechnologies/common/navbar.jsp');
	});   	
	
	function search(keywords)
	{
		var word = document.getElementById("srch-term").value;
		$.ajax({
		       type: "GET",
		       url: "http://localhost:8080/ISellToYouRESTWebService/searchProducts?keywords=" + word,
		       dataType: "json",
		       cache: false,
		       contentType: "application/json",
		       success: function(data) {
		        alert("Error"+word);
		        
		      },
		        error: function(xhr, status, error) {
		            alert("Error" + word);
		        }
		    });
	}
	
	</script>
	


  </head>
  <body>
 	<div id="navbar"></div>
 	
   <div class="container">	
   <br>
   <div class = "row">
  		<div class="col-sm-12 col-md-12">
	        <form class="navbar-form" role="search" action="./SearchProducts" method="GET">
	        <div class="input-group">
	            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
	            <div class="input-group-btn">
	                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
	            </div>
	        </div>
	        </form>
        </div>
        
        </div>
  		<br>
  		
  		<div class = "row">
  		<h3 align = "center">It's Easy!</h3><br>
  		<div class="process">
		    <div class="process-row">
		    <div class="process-step">
		            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-search fa-3x"></i></button>
		            <p>Look for a product</p>
		        </div>
		        <div class="process-step">
		            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-user fa-3x"></i></button>
		            <p>See the personal <br>data of the seller</p>
		        </div>
		        <div class="process-step">
		            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-comments-o fa-3x"></i></button>
		            <p>Send email to him</p>
		        </div>
		        <div class="process-step">
		            <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-thumbs-up fa-3x"></i></button>
		            <p>You choose the product</p>
		        </div> 
		         <div class="process-step">
		            <button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-eur fa-3x"></i></button>
		            <p>You Pay!</p>
		        </div> 
		    </div>
		</div>
		</div>
  		
  		
  		
  		<!-- 
  		<div class = "row">
  		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		  
		  <ol class="carousel-indicators">
		    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
		  </ol>
		
		  <div class="carousel-inner">
		    <div class="item active">
		      <img src="" alt="">
		      <div class="carousel-caption">
		        <p>1</p>
		      </div>
		    </div>
		    <div class="item active">
		      <img src="" alt="">
		      <div class="carousel-caption">
		        <p>2</p>
		      </div>
		    </div>
		    <div class="item active">
		      <img src="" alt="">
		      <div class="carousel-caption">
		        <p>3</p>
		      </div>
		    </div>
		    
		  </div>
		
		  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
		    <span class="glyphicon glyphicon-chevron-left"></span>
		  </a>
		  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
		    <span class="glyphicon glyphicon-chevron-right"></span>
		  </a>
		</div> 
  		</div>
  		 -->
  		
    </div> <!-- End Container -->
 	
 	<div id="footer">
      
    </div>
 	<!-- End footer -->
 	
 	
  </body>
 </html>